<template>
	<view class="list_box">
		<!-- 名词解释列表 -->
		<view class="noun_list" v-if="slabelindexnum==1 && !itemshow">
			<view  class="noun_item" v-for="(item,index) in staduylist" :key="index">
				<view class="" @click="toinfo(item)">
					
				<view class="n_title">
					<span class="name">{{item.studyName}}</span>
					<span class="categy">{{item.studyKey}}</span>
				</view>
				<view class="n_content">
					<view class="content_text">
						<jyfParser :html="item.studyDetail" :isAll="true"></jyfParser>
						<!-- {{item.studyDetail}} -->
					</view>
					<view class="content_img">
						<image style="width: 150rpx; height: 150rpx;" :src="item.studyImage" mode=""></image>
					</view>
				</view>
				</view>
				<view class="n_bottom">
					<view class="n_b_left">
						<view class="collect" @click="changecllect(item,index)">
							<image v-if="item.collectRecordFlag" style="width: 40rpx; height: 40rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect.png" mode="">
							</image>
							<image v-else style="width: 45rpx; height: 45rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect_k.png"
								mode=""></image>
							<span style="margin-left: 10rpx;">收藏</span>
						</view>
						<view class="comment" @click="openCommnet(item)">
							<uni-icons type="chat" size="80rpx"></uni-icons>
							<span style="margin-left: 10rpx;font-size: 24rpx;">{{item.commentNum}}</span>
						</view>
					</view>
					<view class="n_b_right">
						<view class="transmit">
							<image style="width: 40rpx; height: 40rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/zhuanfa_sta.png"
								mode=""></image>

							<!-- <span>转发</span> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 趣味地坪  -->
		<view class="noun_list" v-if="slabelindexnum==2 && !itemshow">
			<view  class="noun_item" v-for="(item,index) in staduylist" :key="index">
				<view class="" @click="toinfo(item)">
					
				<view class="n_title">
					<span class="name">{{item.studyName}}</span>
					<span class="categy">{{item.studyKey}}</span>
				</view>
				<view class="interset_content">
					<view class="interset_img">
						<image style="width: 100%; height: 150rpx;" :src="item.studyImage" mode=""></image>
					</view>
					<view class="interset_text">
						<jyfParser :html="item.studyDetail" :isAll="true"></jyfParser>
						<!-- {{item.studyDetail}} -->
					</view>

				</view>
				</view>
				<view class="n_bottom">
					<view class="n_b_left">
						<view class="collect" @click="changecllect(item,index)">
							<image v-if="item.collectRecordFlag" style="width: 40rpx; height: 40rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect.png" mode="">
							</image>
							<image v-else style="width: 45rpx; height: 45rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect_k.png"
								mode=""></image>
							<span style="margin-left: 10rpx;">收藏</span>
						</view>
						<view class="comment" @click="openCommnet(item)">
							<uni-icons type="chat" size="80rpx"></uni-icons>
							<span style="margin-left: 10rpx;font-size: 24rpx;">{{item.commentNum}}</span>
						</view>
					</view>
					<view class="n_b_right">
						<view class="transmit">
							<image style="width: 40rpx; height: 40rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/zhuanfa_sta.png"
								mode=""></image>

							<!-- <span>转发</span> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--详情 -->
		<view class="info_box" v-if="slabelindexnum==0 && !itemshow">
			<view class="explain_content" v-if="JSON.stringify(iteminfo)!='{}'">
				<view class="ex_title">
					<span class="name">{{iteminfo.studyName}}</span>
					<span class="tag">{{iteminfo.studyKey}}</span>
				</view>
				<view class="ex_info">
					<view class="ex_img" @click="showImage(iteminfo.studyImage)">
						<image style="width: 670rpx;height: 186rpx;" :src="iteminfo.studyImage" mode=""></image>
					</view>
					<view class="ex_text">
						 <jyfParser :html="iteminfo.studyDetail" :isAll="true"></jyfParser>
					</view>
					<view class="ex_bottom">
						<view class="n_b_left">
							<view class="collect" @click="changecllectfn(iteminfo)">
								<image v-if="iteminfo.collectRecordFlag" style="width: 40rpx; height: 40rpx;"
									src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect.png"
									mode="">
								</image>
								<image v-else style="width: 45rpx; height: 45rpx;"
									src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect_k.png"
									mode=""></image>
								<span style="margin-left: 10rpx;">收藏</span>
							</view>
							<view class="comment" @click="openCommnet(iteminfo)">
								<uni-icons type="chat" size="80rpx"></uni-icons>
								<span style="margin-left: 10rpx;font-size: 24rpx;">{{iteminfo.commentNum}}</span>
							</view>
						</view>
						<view class="n_b_right">
							<view class="transmit">
								<image style="width: 40rpx; height: 40rpx;"
									src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/zhuanfa_sta.png"
									mode=""></image>
						
								<!-- <span>转发</span> -->
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 简介 -->
			<view class="brief">
				<view class="br_title">
					<view class="name">
						简介
					</view>
					<view style="font-size: 28rpx; color: #cecece;">
						OVERVIEV
					</view>
				</view>
				<view class="iswhat">
					<view class="is_title">
						<image style="width: 40rpx; height: 40rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/jieshao_sta.png" mode=""></image>
					    <view style="margin-left: 20rpx;">{{iteminfo.introList[0].detailSmallTitle}}</view>
					</view>
					<view class="is_context">
						<jyfParser :html="iteminfo.introList[0].detailContent" :isAll="true"></jyfParser>
					</view>
				</view>
				
			</view>
			<!-- 作用 -->
			<view class="effect">
					<view class="ef_title">
						<view class="name">
							功能作用
						</view>
						<view style="font-size: 28rpx; color: #cecece;">
							OVERVIEV
						</view>
					</view>
					<view class="efwhat" v-for="(item,index) in iteminfo.functionalList" :key="index">
						<view class="is_title">
							<image style="width: 40rpx; height: 40rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/jieshao_sta.png" mode=""></image>
						    <view style="margin-left: 20rpx;">{{item.detailSmallTitle}}</view>
						</view>
						<view class="is_context">
							<jyfParser :html="item.detailContent" :isAll="true"></jyfParser>
						</view>
					</view>
				
			</view>
		</view>
	<!--详情 -->
		<view class="info_box" v-if="itemshow">
			<view class="explain_content" v-if="JSON.stringify(iteminfo)!='{}'">
				<view class="ex_title">
					<span class="name">{{iteminfo.studyName}}</span>
					<span class="tag">{{iteminfo.studyKey}}</span>
				</view>
				<view class="ex_info">
					<view class="ex_img" @click="showImage(iteminfo.studyImage)">
						<image style="width: 670rpx;height: 186rpx;" :src="iteminfo.studyImage" mode=""></image>
					</view>
					<view class="ex_text">
						 <jyfParser :html="iteminfo.studyDetail" :isAll="true"></jyfParser>
					</view>
					<view class="ex_bottom">
						<view class="n_b_left">
							<view class="collect" @click="changecllectfn(iteminfo)">
								<image v-if="iteminfo.collectRecordFlag" style="width: 40rpx; height: 40rpx;"
									src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect.png"
									mode="">
								</image>
								<image v-else style="width: 45rpx; height: 45rpx;"
									src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect_k.png"
									mode=""></image>
								<span style="margin-left: 10rpx;">收藏</span>
							</view>
							<view class="comment" @click="openCommnet(iteminfo)">
								<uni-icons type="chat" size="80rpx"></uni-icons>
								<span style="margin-left: 10rpx;font-size: 24rpx;">{{iteminfo.commentNum}}</span>
							</view>
						</view>
						<view class="n_b_right">
							<view class="transmit">
								<image style="width: 40rpx; height: 40rpx;"
									src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/zhuanfa_sta.png"
									mode=""></image>
						
								<!-- <span>转发</span> -->
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 简介 -->
			<view class="brief">
				<view class="br_title">
					<view class="name">
						简介
					</view>
					<view style="font-size: 28rpx; color: #cecece;">
						OVERVIEV
					</view>
				</view>
				<view class="iswhat">
					<view class="is_title">
						<image style="width: 40rpx; height: 40rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/jieshao_sta.png" mode=""></image>
					    <view style="margin-left: 20rpx;">{{iteminfo.introList[0].detailSmallTitle}}</view>
					</view>
					<view class="is_context">
						<jyfParser :html="iteminfo.introList[0].detailContent" :isAll="true"></jyfParser>
					</view>
				</view>
				
			</view>
			<!-- 作用 -->
			<view class="effect">
					<view class="ef_title">
						<view class="name">
							功能作用
						</view>
						<view style="font-size: 28rpx; color: #cecece;">
							OVERVIEV
						</view>
					</view>
					<view class="efwhat" v-for="(item,index) in iteminfo.functionalList" :key="index">
						<view class="is_title">
							<image style="width: 40rpx; height: 40rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/jieshao_sta.png" mode=""></image>
						    <view style="margin-left: 20rpx;">{{item.detailSmallTitle}}</view>
						</view>
						<view class="is_context">
							<jyfParser :html="item.detailContent" :isAll="true"></jyfParser>
						</view>
					</view>
				
			</view>
		</view>
<uni-popup ref="commentModel" type="bottom" @touchmove.stop.prevent="moveHandle">
					<!-- 评论模块 start -->
					<view class="video_comment" @tap="closeCommet">
						<view class="title">
							<view class="com_t_l">
								<text class="com_t_l_title">{{$L('全部评论')}}</text>
								<text class="com_t_l_total">{{$L('共有')}}{{videoDetail.commentNum}}{{$L('条评论')}}</text>
							</view>
							<image class="com_t_close" :src="imgUrl+'svideo/close.png'" @tap="closeComment">
							</image>
						</view>

						<scroll-view class="comment" scroll-y="true" @scrolltolower="getMoreCom">
							<view v-for="(item, index) in commentList" :key="index" class="com_item_wrap" :index="index"
								v-if="commentList.length>0">
								<view class="com_item">
									<view class="com_item_l">
										<view class="com_avator"
											:style="'background-image:url('+item.memberAvatar+');' + bgStyle"
											@click="intoUser(item.authorId?item.authorId:item.fromAuthorId)"></view>
										<view class="com_detail" :data-commentId="item.commentId"
											:data-authorId="item.authorId?item.authorId:item.fromAuthorId"
											:data-memberNickname="item.authorName?item.authorName:item.fromAuthorName"
											@tap.stop="replyComment">
											<text
												class="com_name">{{item.authorName?item.authorName:item.fromAuthorName}}</text>
											<text class="com_con">{{item.content}}</text>
											<view class="com_other">
												<text class="com_time">{{item.createTime}}</text>
												<text v-if="item.isSelf" class="del_com" data-type="comment"
													@tap.stop="delCom"
													:data-commentId="item.commentId">{{$L('删除')}}</text>
											</view>
										</view>
									</view>
									<view class="com_item_r">
										<view class="" :data-commentid="item.commentId" @tap="likeComment">
											  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-if="item.isLike"
												   :color="diyStyle_var['--color_video_main']"></svgGroup>
											  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-else color="#dedede"></svgGroup>
										</view>
										<text>{{item.likeNum}}</text>
									</view>
								</view>

								<view v-for="(itemReplay, index2) in item.replyList" :key="index2" class="child"
									:index="index2" v-if="item.replyList.length>0">
									<view class="com_item" v-if="index2<item.limit">
										<view class="com_item_l">
											<view class="com_avator"
												:style="'background:url('+itemReplay.memberAvatar+');' + bgStyle">
											</view>
											<view class="com_detail" :data-commentId="item.commentId"
												:data-replyId="itemReplay.replyId"
												:data-memberNickname="itemReplay.fromAuthorName"
												@tap.stop="replyComment">
												<text class="com_name">{{itemReplay.fromAuthorName}}</text>
												<text class="com_con">{{$L('回复')}}<text
														class="replay_name">{{itemReplay.toAuthorName!=undefined?itemReplay.toAuthorName:""}}：</text>{{itemReplay.content}}
												</text>
												<view class="com_other">
													<text class="com_time">{{itemReplay.createTime}}</text>
													<text v-if="itemReplay.isSelf == 1" class="del_com"
														data-type="reply" @tap.stop="delCom"
														:data-commentId="item.commentId"
														:data-replyId="itemReplay.replyId">{{$L('删除')}}</text>
												</view>
											</view>
										</view>
										<view class="com_item_r">
											<view class="" :data-commentid="item.commentId" :data-replyid="itemReplay.replyId" @tap="likeReply">
											  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-if="itemReplay.isLike"
												   :color="diyStyle_var['--color_video_main']"></svgGroup>
											  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-else color="#dedede"></svgGroup>
											</view>
											<text>{{itemReplay.likeNum}}</text>
										</view>
									</view>
								</view>
								<!-- 查看更多回复 -->
								<view v-if="item.replyList.length>item.limit&&item.isFoldReply" class="reply_pagnation"
									@tap.stop="getMoreReply(item)" :data-commentId="item.commentId"
									:data-rpn="item.rpn">
									<view class="left_line"></view>
									<text class="more_reply">{{$L('查看更多回复')}}</text>
									<view class="right_line"></view>
								</view>
								<!-- 收起更多回复 -->
								<view v-if="item.replyList.length==item.limit&&!item.isFoldReply"
									class="reply_pagnation" @tap.stop="closeMoreReply(item)"
									:data-commentId="item.commentId">
									<view class="left_line"></view>
									<text class="more_reply">{{$L('收起更多回复')}}</text>
									<view class="right_line"></view>
								</view>
							</view>

							<!-- 数据加载完毕 -->
							<dataLoaded :showFlag="!hasmore&&commentList.length>0" />

							<!-- 数据加载中 -->
							<dataLoading :showFlag="hasmore&&loading" />

							<!-- 页面loading -->
							<view class="page_loading_child" v-if="firstLoading">
								<image :src="imgUrl + 'svideo/page_loading_icon.gif'"></image>
							</view>

						</scroll-view>

						<view class="comment_empty" v-if="!firstLoading&&!commentList.length">
							<!-- 页面空数据 -->
							<emptyData :emptyIcon="imgUrl+'svideo/live_list_empty_icon.png'"
								:showFlag="!firstLoading&&!commentList.length" />
						</view>

						<view class="replay">
							<view class="input_wrap" @click.stop="showFocus=true">
								<text v-if="replyInfo!=''" class="reply_tip">{{$L('回复')}}@<text
										class="reply_name">{{replyInfo.memberNickname?replyInfo.memberNickname:replyInfo.memberName}}</text></text>
								<image v-if="replyInfo==''" :src="imgUrl+'svideo/edit.png'"></image>
								<input type="text" cursor-spacing="30" :focus="showFocus" name="reply_con"
									class="reply_inp" :placeholder="$L('赶快发表你的评论吧~')"
									placeholder-style="font-size:24rpx;color:#949494" confirm-type="send"
									@confirm="sendReplyComment" maxlength="100" v-model="input_val"></input>
							</view>
						</view>
					</view>
					<!-- 评论模块 end -->
				</uni-popup>

	</view>



</template>

<script>
	import {
		checkPageHasMore
	} from "@/utils/live";
	import request from "@/utils/request";
	import pageLoading from "../live/pageLoading.vue";
	import emptyData from "../live/emptyData.vue";
	import dataLoading from "../live/dataLoading.vue";
	import dataLoaded from "../live/dataLoaded.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import jyfParser from '@/components/jyf-parser/jyf-parser'
	const imgUrl = getApp().globalData.imgUrl;
	let cur_time = 0; //记录发送评论的时间，由于微信小程序本身input的发送时间在swiper里面会触发两次，所以时间间隔规避一下这个问题
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: '',
		data() {
			return {
				collectshow: false, //收藏
				// 
				loading: false, //数据加载状态
				 videoDetail: {}, //短视频详情
				 authorDetail: '', //短视频作者详情
				 bgStyle: 'background-size:contain;background-position:center center;background-repeat: no-repeat;', //背景图片样式
			     commentList: [], // 评论列表
				hasmore: true, //是否还有数据，用于页面展示
			    input_val: '', //输入框内容
			     firstLoading: true, //是否是初次加载，的话展示页面居中的loading效果，
			     showFocus: false, //评论回复输入框默认失去焦点
			     replyInfo: '', //回复评论的数据
			     showComment: false, //是否显示评论
				 video_id:'',
			     pn: 1, //当前页
			     pageSize: 10, //每页数据
			imgUrl: getApp().globalData.imgUrl, //图片地址
			   iteminfo:{},//详情内容
			   itemshow:false,
			   slabelindexnum:0,
			   staduylistnum:[]
			}
		},
		props: {
			labelindex:{
				type: Number,
				value: 0
			},//一级类目
			slabelindex: {
				type: Number,
				value: 0
			}, //学习中心二级分类
			staduylist: {
				type: Array,
				value: []
			},
		},
		components:{
			emptyData,
			dataLoading,
			dataLoaded,
			uniPopup,
			uniPopupDialog,
			jyfParser
		},
		computed: {
			...mapState(['hasLogin', 'cartData', 'userInfo'])
		},
		created() {
			this.slabelindexnum=this.slabelindex
			this.staduylistnum=this.staduylist
		  if(this.labelindex==2){
			  // 学习中心
			  this.itemshow=true
			 this.getnameinfo({id:this.staduylistnum[0].studyId})
		  }
			// this.iteminfo=this.staduylist[0]
			// console.log(this.iteminfo,this.labelindex);
		},
		watch:{
			staduylistnum:{
				handler(nel,oll){
					this.staduylistnum=nel
					this.getnew()
				console.log(nel,oll,'zi');
				}
			},
			slabelindexnum:{
				handler(ne,od){
					console.log(ne,od);
					
					if(ne==0){
						console.log(this.staduylistnum,'qi');
						this.itemshow=false
						console.log(this.iteminfo,ne);
						this.$emit("changeslbelfn",0)
					}
				}
			}
		},
		methods: {
			getnew(){
				this.getnameinfo({id:this.staduylistnum[0].studyId})
			},
			// 列表收藏
			changecllect(val,idx) {
				if(val.collectRecordFlag){
					// 取消收藏
					this.$request({
						url:'v3/study/front/collect/delete',
						method:'GET',
						data:{
							otherId:val.studyId,
							collectType:'1'
						}
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
								title:"取消成功",
								icon:'none'
							})
						}
						val.collectRecordFlag=false
						this.$set(this.staduylistnum,idx,val)
					})
				}else{
					// 添加收藏
					this.$request({
						url:'v3/study/front/collect/add',
						method:'POST',
						header:{
							'Content-Type': 'application/json'
						},
						data:{
							otherId:val.studyId,
							collectType:'1',
							collectTitle:val.studyName,
							collectContent:val.studyImage
						}
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
								title:"收藏成功",
								icon:'none'
							})
							val.collectRecordFlag=true
							this.$set(this.staduylistnum,idx,val)
						}
					})
				}
				// this.collectshow = !this.collectshow
			},
			// 详情收藏
			changecllectfn(val){
				if(val.collectRecordFlag){
					// 取消收藏
					this.$request({
						url:'v3/study/front/collect/delete',
						method:'GET',
						data:{
							otherId:val.studyId,
							collectType:'1'
						}
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
								title:"取消成功",
								icon:'none'
							})
						}
						 
						this.$set(val,"collectRecordFlag",false)
					})
				}else{
					// 添加收藏
					this.$request({
						url:'v3/study/front/collect/add',
						method:'POST',
						header:{
							'Content-Type': 'application/json'
						},
						data:{
							otherId:val.studyId,
							collectType:'1',
							collectTitle:val.studyName,
							collectContent:val.studyImage
						}
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
								title:"收藏成功",
								icon:'none'
							})
							this.$set(val,'collectRecordFlag',true)
						}
					})
				}
			},
			toinfo(val){
				// console.log(val,this.slabelindex);
				this.$emit("changeslbelfn",this.slabelindex)
				this.getnameinfo({id:val.studyId})
				this.itemshow=true
				 
			},
			// 查看数据详情
			getnameinfo(val){
				this.$request({
					url:'v3/study/front/studyCenter/detail?studyId='+val.id,
				    method:'GET'
				}).then(res=>{
					this.iteminfo=res.data
					this.videoDetail.commentNum=res.data.commentNum
					
				})
			},
			//预览
			showImage(val){
			let arry=[]
			arry.push(val)
				uni.previewImage({
					urls:arry,//图片数组
					current:arry[0]
				})
			},
			
			
			// 评论
			//获取评论列表
			getCommentList() {
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/list'
				param.method = 'GET'
				param.data.pageSize = this.pageSize
				param.data.current = this.pn
				param.data.videoId = this.video_id
				param.data.commentType=2
				this.$request(param).then(res => {
					if (res.state == 200) {
						let list = res.data.list;
						list.forEach(el => el.rpn = 1);
			
						if (this.pn == 1) {
							this.commentList = list;
						} else {
							this.commentList = this.commentList.concat(list);
						}
			
						if (checkPageHasMore(res.data.pagination)) {
							this.pn++;
						} else {
							this.hasmore = false;
						} //初次加载的话更改状
						this.commentList.map((item) => {
							this.$set(item, 'limit', 3)
							this.$set(item, 'isFoldReply', true)
						})
						if (this.firstLoading) {
							this.firstLoading = false;
						}
			
						this.loading = false
					}
				})
			},
			
			//评论列表滑到底部加载数据
			getMoreCom() {
				if (this.hasmore) {
					this.getCommentList();
				}
			},
			//评论模块删除事件
			delCom(e) {
				e.stopPropagation()
				let tmp_data = e.currentTarget.dataset;
				uni.showModal({
					title: '',
					content: this.$L(`确认删除该评论？`),
					confirmText: this.$L('确定'),
					cancelText:this.$L('取消'),
					success: res => {
						if (res.confirm) {
							if (tmp_data.type == 'comment') {
								this.delComment(tmp_data.commentid);
							} else {
								this.delApply(tmp_data.replyid, tmp_data.commentid);
							}
						}
					}
				});
			},
			
			// 删除回复
			delApply(replyId, commentId) {
				let {
					video_id,
					videoDetail,
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/delReply'
				param.method = 'POST'
				param.data.replyId = replyId
				this.$request(param).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.state == 200) {
						let index = commentList.findIndex(el => el.commentId == commentId);
						let r_index = commentList[index].replyList.findIndex(el => el.replyId == replyId);
						commentList[index].replyList.splice(r_index, 1);
						this.commentList = commentList
			
					}
				})
			},
			
			// 删除评论
			delComment(commentId) {
				let {
					video_id,
					videoDetail,
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/del'
				param.method = 'POST'
				param.data.commentId = commentId
				param.data.commentType=2
				this.$request(param).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
			
					if (res.state == 200) {
						videoDetail.commentNum = --videoDetail.commentNum;
						uni.$emit('updateComment',videoDetail.commentNum)
						let index = commentList.findIndex(el => el.commentId == commentId);
						commentList.splice(index, 1);
						this.videoDetail = videoDetail
						this.commentList = commentList
					}
				})
			},
			
			// 点赞评论
			likeComment(e) {
				let commentId = e.currentTarget.dataset.commentid;
				let {
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/clickPraise'
				param.method = 'POST'
				param.data.commentId = commentId
				if (this.hasLogin) {
					this.$request(param).then(res => {
						if (res.state == 200) {
							let index = commentList.findIndex(el => el.commentId == commentId);
							let isLike = commentList[index].isLike;
							commentList[index].isLike = !isLike;
							commentList[index].likeNum = !isLike ? commentList[index].likeNum + 1 : commentList[index].likeNum - 1;
							this.commentList = commentList
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				} else {
					getApp().globalData.goLogin(this.$Route);
				}
			},
			
			// 点赞回复
			likeReply(e) {
				let commentId = e.currentTarget.dataset.commentid;
				let replyId = e.currentTarget.dataset.replyid;
				let {
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/replyClickPraise'
				param.method = 'POST'
				param.data.replyId = replyId
				if (this.hasLogin) {
					this.$request(param).then(res => {
						if (res.state == 200) {
							let index = commentList.findIndex(el => el.commentId == commentId);
							let r_index = commentList[index].replyList.findIndex(el => el.replyId == replyId);
							let isLike = commentList[index].replyList[r_index].isLike;
							commentList[index].replyList[r_index].isLike = !isLike;
							commentList[index].replyList[r_index].likeNum = !isLike ? commentList[index].replyList[r_index].likeNum + 1 : commentList[index].replyList[r_index].likeNum - 1;
							this.commentList = commentList
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				} else {
					getApp().globalData.goLogin(this.$Route);
				}
			},
			
			//回复评论
			replyComment(e) {
				let tmp = e.currentTarget.dataset;
				let {
					replyInfo
				} = this;
				if (this.hasLogin) {
					this.replyInfo = {
							commentId: tmp.commentid,
							replyId: tmp.replyid,
							memberNickname: tmp.membernickname
						},
						this.showFocus = true
				} else {
					uni.showToast({
						title: this.$L('需要登录才能回复哦'),
						icon: 'none'
					});
				}
			},
			
			//评论功能
			sendReplyComment(e) {
				if (!e.detail.value) {
					return
				}
				if (Date.parse(new Date()) - cur_time < 10) {
					return false;
				} else {
					cur_time = Date.parse(new Date());
				}
				if (!this.hasLogin) {
					getApp().globalData.goLogin(this.$Route);
					return;
				}
			
				let {
					replyInfo,
					video_id,
					commentList,
					videoDetail
				} = this;
				if (replyInfo == '') {
					//发布评论
					let param = {}
					param.data = {}
					param.url = 'v3/video/front/video/comment/publish'
					param.method = 'POST'
					param.data.content = e.detail.value
					param.data.videoId = video_id
					param.data.commentType=2
					this.$request(param).then(res => {
						if (res.state == 200) {
							let that = this
							// videoDetail.commentNum = Number(videoDetail.commentNum) + 1;
							res.data.replyList = []
							res.data.limit = 3
							commentList.unshift({
								...res.data,
								isSelf: true
							});
							// that.getCommentList()
							//清空输入内容
							setTimeout(() => {
								that.commentList = JSON.parse(JSON.stringify(commentList))
								that.input_val = ''
								that.showFocus = false
								that.videoDetail = videoDetail
							}, 0)
			
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
				} else {
					//回复评论
					let that = this
					let param = {}
					param.data = {}
					param.url = 'v3/video/front/video/comment/reply'
					param.method = 'POST'
					param.data.content = e.detail.value
					param.data.commentId = replyInfo.commentId
					param.data.parentReplyId = replyInfo.replyId ? replyInfo.replyId : 0
			
					this.$request(param).then(res => {
						if (res.state == 200) {
							let index = commentList.findIndex(el => el.commentId == replyInfo.commentId);
							commentList[index].replyList.push({
								...res.data,
								isSelf: true
							}); //清空输入内容
							if (commentList[index].replyList.length > 3) {
								commentList[index].isFoldReply = false
								commentList[index].limit = commentList[index].replyList.length
							}
							this.commentList = commentList
							this.input_val = ''
							this.showFocus = false
							this.replyInfo = ''
							this.$forceUpdate()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
				}
			},
			
			//关闭评论
			closeComment() {
				this.$refs.commentModel.close()
			},
			
			//打开评论
			openCommnet(val) {
				// if (this.videoDetail.state != 2) {
				// 	uni.showToast({
				// 		title: this.$L('该视频未审核通过,不能评论哦～'),
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.video_id=val.studyId
				this.$refs.commentModel.open()
				this.firstLoading = true
				this.hasmore = true
				this.pn = 1
				this.getCommentList();
			},
			
			// 查看更多回复
			getMoreReply(reply) {
				reply.limit = reply.replyList.length
				reply.isFoldReply = false
			},
			
			// 收起更多回复
			closeMoreReply(reply) {
				reply.limit = 3
				reply.isFoldReply = true
			},
			
			chansgedd() {
				// #ifdef H5
				let currentId = 'myVideo' + this.video_id; // 获取当前视频id
				let current_video = videojs(currentId)
				if (this.videoPlay) {
					this.videoPlay = false;
					current_video.pause();
				} else {
					this.videoPlay = true;
					current_video.play();
				}
				// #endif
				// #ifdef MP
				if (this.videoPlay) {
					this.videoPlay = false;
					uni.createVideoContext('sldVideo_child' + this.video_id, this).pause();
				} else {
					this.videoPlay = true;
					uni.createVideoContext('sldVideo_child' + this.video_id, this).play();
				}
				// #endif
			},
			bindplay() {
				this.videoPlay = true;
			},
			bindpause() {
				this.videoPlay = false;
			},
			
			
			moveHandle() {},
			
			closeCommet() {
				this.showFocus = false;
				uni.hideKeyboard();
				if (this.replyInfo) {
					this.replyInfo = '';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list_box {
		overflow: hidden;

		.noun_list {
			.noun_item {
				background-color: #fff;
				margin-bottom: 10rpx;
				padding: 10rpx 20rpx;

				.n_title {
					padding: 10rpx 0;

					.name {
						font-size: 28rpx;
						font-weight: 600;
						letter-spacing: 2rpx;
					}

					.categy {
						font-size: 24rpx;
						margin-left: 20rpx;
						color: #3d79fa;
						background-color: #f5f5f5;
						padding: 4rpx 8rpx;
						border-radius: 6rpx;
					}
				}

				// 名词解释内容
				.n_content {
					display: flex;
					align-items: center;

					.content_text {
						padding-right: 20rpx;
						font-size: 24rpx;

						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						/* 设置显示的行数 */
						overflow: hidden;

					}

					.content_img {
						background-color: green;
					}
				}

				// 趣味地坪
				.interset_content {

					.interset_text {
						padding-right: 20rpx;
						font-size: 24rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						/* 设置显示的行数 */
						overflow: hidden;

					}

					.interset_img {
						// background-color: green;
						margin-bottom: 20rpx;
						border-radius: 20rpx;
					}
				}

				.n_bottom {
					padding: 25rpx 10rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.n_b_left {
						display: flex;

						.collect {
							font-size: 24rpx;
							margin-right: 20rpx;
							display: flex;
							align-items: center;
						}

						.comment {}
					}

					.n_b_right {
						.transmit {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
// 詳情
.info_box{
	.explain_content{
		padding: 10rpx 20rpx;
		background-color: #fff;
		.ex_title{
			padding: 10rpx 0;
			.name{
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 4rpx;
			}
			.tag{
				font-size: 24rpx;
				margin-left: 20rpx;
				color: #3d79fa;
				background-color: #f5f5f5;
				padding: 4rpx 8rpx;
				border-radius: 6rpx
			}
		}
		.ex_info{
			.ex_img{
				// background-color: yellow;
				border-radius: 20rpx;
			}
			.ex_text{
				padding: 20rpx 10rpx 20rpx;
			}
			.ex_bottom{
				border-top: 2rpx solid #e8e8e8;
				padding: 25rpx 10rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.n_b_left {
					display: flex;
				
					.collect {
						font-size: 24rpx;
						margin-right: 20rpx;
						display: flex;
						align-items: center;
					}
				
					.comment {}
				}
				
				.n_b_right {
					.transmit {
						display: flex;
						align-items: center;
					}
				}
			}
		}
		
	}
	.brief{
		margin-top: 20rpx;
		padding: 10rpx 20rpx 20rpx;
		background-color: #fff;
		.br_title{
			.name{
				font-size: 32rpx;
				font-weight: 600;
			}
		}
		.iswhat{
			padding: 10rpx 0;
			.is_title{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 600;
			}
			.is_context{
				padding: 10rpx 0;
				font-size: 28rpx;
			}
		}
	}
	.effect{
		// margin-top: 20rpx;
		padding: 10rpx 20rpx 20rpx;
		background-color: #fff;
		.ef_title{
			.name{
				font-size: 32rpx;
				font-weight: 600;
			}
		}
		.efwhat{
			padding: 10rpx 0;
			.is_title{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 600;
			}
			.is_context{
				padding: 10rpx 0;
				font-size: 28rpx;
			}
		}
	}
	
	
}
// 评论
overflow-y: hidden;
.video_comment {
		/* position: fixed; */
		position: absolute;
		z-index: 100;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		/* height: 90vw; */
		background: #fff;
		border-radius: 15rpx 15rpx 0 0;
	}


	.video_comment .comment_empty {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		top: 70rpx;
	}

	.video_comment .title {
		display: flex;
		padding: 30rpx;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
		height: 102rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.video_comment .title .com_t_l {
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.video_comment .title .com_t_l .com_t_l_title {
		color: #2d2d2d;
		font-size: 32rpx;
		margin-right: 18rpx;
	}

	.video_comment .title .com_t_l .com_t_l_total {
		color: #949494;
		font-size: 22rpx;
	}

	.video_comment .title .com_t_close {
		width: 48rpx;
		height: 48rpx;
	}
	
	.reply_pagnation {
		width: 550rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 40rpx;
		/* padding-left: 110rpx;
		padding-right: 90rpx; */
		margin: 0 auto;
	}
	
	.replay {
		position: absolute;
		z-index: 4;
		height: 100rpx;
		width: 750rpx;
		padding: 0 30rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 90rpx;
		box-shadow: 0px 0px 20px 0px rgba(86, 86, 86, 0.08);
	}
	
	.replay .input_wrap {
		background-color: #f5f5f5;
		border-radius: 12px;
		width: 690rpx;
		height: 65rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.replay .input_wrap .reply_inp {
		display: flex;
		flex: 1;
	}
	
	.replay .input_wrap image {
		width: 47rpx;
		height: 47rpx;
		margin: 0 10rpx;
	}
	
	.replay .reply_tip {
		color: #2d2d2d;
		font-size: 24rpx;
		padding: 0 15rpx;
	}
	
	.replay .reply_name {
		color: #4d8efb;
	}
	
	.video_comment .comment .com_item_wrap {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	.video_comment .comment {
		width: 100%;
		height: 720rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		margin-top: 20rpx;
		/* position: relative; */
		padding-bottom: 100rpx;
	}
	
	.video_comment .comment .com_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		width: calc(750rpx - 60rpx);
		margin-left: 30rpx;
	}
	
	.video_comment .comment .com_item .com_item_l {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 600rpx;
	}
	
	.video_comment .comment .com_item .com_item_l .com_avator {
		width: 43rpx;
		height: 43rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		margin-top: 10rpx;
	}
	
	.video_comment .comment .com_item .com_item_l .com_detail {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex: 1;
	}
	
	.video_comment .comment .com_item .com_item_l .com_detail .com_name {
		color: #2d2d2d;
		font-size: 28rpx;
		margin-bottom: 12rpx;
	}
	
	.video_comment .comment .com_item .com_item_l .com_detail .com_con {
		color: #2d2d2d;
		font-size: 26rpx;
		line-height: 39rpx;
		margin-bottom: 7rpx;
		word-break: break-all;
	}
	
	.video_comment .comment .com_item .com_item_l .com_detail .com_other {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		margin-bottom: 12rpx;
	}
	
	.video_comment .comment .com_item .com_item_l .com_detail .com_other .com_time {
		color: #949494;
		font-size: 22rpx;
		margin-right: 20rpx;
	}
	
	.video_comment .comment .com_item .com_item_l .com_detail .com_other .del_com {
		color:var(--color_video_main);
		font-size: 20rpx;
	}
	
	.video_comment .comment .com_item .com_item_r {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.video_comment .comment .com_item .com_item_r image {
		width: 46rpx;
		height: 46rpx;
	}
	
	.video_comment .comment .com_item .com_item_r text {
		color: #949494;
		font-size: 20rpx;
		margin-top: -3rpx;
	}
	
	.comment .child {
		padding-left: 60rpx;
	}
	
	.video_comment .comment .child .com_item .com_item_l .com_avator {
		width: 30rpx;
		height: 30rpx;
		margin-top: 0;
		margin-right: 10rpx;
	}
	
	.video_comment .comment .child .com_item .com_item_l .com_detail .com_name {
		font-size: 26rpx;
		margin-bottom: 5rpx;
	}
	
	.video_comment .comment .child .com_item .com_item_l .com_detail .com_con {
		font-size: 24rpx;
	}
	
	.video_comment .comment .child .com_item .com_item_l .com_detail .com_con .replay_name {
		color: #949494;
		font-size: 24rpx;
	}
	
	.video_comment .comment .child .com_item {
		width: calc(750rpx - 120rpx);
	}
	
	.video_comment .comment .child .com_item .com_item_l {
		width: 550rpx;
	}
	
	.reply_pagnation {
		width: 550rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 40rpx;
		/* padding-left: 110rpx;
		padding-right: 90rpx; */
		margin: 0 auto;
	}
	
	.reply_pagnation .left_line,
	.reply_pagnation .right_line {
		height: 1rpx;
		background: rgba(0, 0, 0, 0.1);
		width: 166rpx;
	}
	
	.reply_pagnation .more_reply {
		color: #2d2d2d;
		font-size: 22rpx;
	}
	
	.page_loading_child {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: transparent;
	}
	
	.page_loading_child image {
		width: 60rpx;
		height: 60rpx;
	}
	}
</style>